<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="非会员支付" style="height: 400px">
                <div class="clear">
                    <div class="chaxun">
                        <el-input
                                label="活动名称"
                                placeholder="请输入餐桌号码/订单号"
                                v-model="input"
                                clearable class="search">
                        </el-input>
                        <el-button type="primary" @click="chaxun"><i class="el-icon-search"></i></el-button>
                    </div>
                </div>
                <div class="biao"  v-show="isSHOW">
                    <div class="hao">
                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <span class="wen" >桌 号：{{zhuohao}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <span class="wen" >订单号：{{dingdanhao}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <span class="wen">消费明细：</span>
                    </div>
                    <el-table
                            :data="currentData"
                            border
                            :cell-style="cell_style"
                            :header-cell-style="header_style">
                        <!--                设置表格文字居中-->
                        <el-table-column
                                type="index"
                                label="菜品编号"
                                width="120"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="dishesMainId"
                                label="菜名"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                label="菜式数量"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                label="菜品价格">
                        </el-table-column>
                        <el-table-column
                                label="金额"
                        >
                            <!--                            这一列显示每一样菜应该付的钱-->
                            <template slot-scope="scope">
                                ￥{{ (scope.row.sum = parseInt(scope.row.price) *parseInt(scope.row.number)) | keepTwoNum
                                }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div>
                        <el-pagination
                                background hide-on-single-page
                                layout="prev, pager, next"
                                :total="caiData.length"
                                :page-size="4"
                                :pager-count="5"
                                @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                    <div class="hao">
                        <h3 id="jia">订单总消费：￥{{sumMoney.toFixed(2)}}</h3>
                        <el-row>
                            <el-col :span="8" class="juzhong">
                                <div class="grid-content bg-purple">
                                    <el-button type="primary" @click="xianjin">现金支付</el-button>
                                </div>
                            </el-col>
                            <el-col :span="8" class="juzhong">
                                <div class="grid-content bg-purple">
                                    <el-button type="primary" @click="dianzi">电子支付</el-button>
                                </div>
                            </el-col>
                            <el-col :span="8" class="juzhong">
                                <div class="grid-content bg-purple">
                                    <el-button type="primary" @click="quxiao">取消付款</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <!--                    现金支付的框-->
                    <el-dialog title="结账信息" :visible.sync="dialogFormVisible" width="25%"
                               center>
                        <el-form :model="form">
                            <el-form-item label="应收金额:" :label-width="formLabelWidth">
                                <p>￥{{sumMoney.toFixed(2)}}</p>
                            </el-form-item>
                            <el-form-item label="实收金额:" :label-width="formLabelWidth">
                                <el-input v-model="form.shishou" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="找零:" :label-width="formLabelWidth">
                                <p>{{zhao.toFixed(2)}}</p>
                            </el-form-item>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="shuoqian">确 定</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>

                        </div>
                    </el-dialog>
                    <!--                    微信支付的框-->

                    <el-dialog title="结账信息" :visible.sync="dialogImgVisible" width="38%"
                               center>
                        <el-row>
                            <el-col :span="12" class="juzhong">

                                    <el-image :src="zhifubao" fit="cover">
                                    </el-image>

                            </el-col>
                            <el-col :span="12" class="juzhong">


                                    <el-image :src="weixin" fit="cover">
                                    </el-image>
                            </el-col>

                        </el-row>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="shuoqian">确 定</el-button>
                            <el-button @click="dialogImgVisible = false">取 消</el-button>

                        </div>
                    </el-dialog>


                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import axios from '../../http/http'
    import * as api from '../../http/api'
    import bus from '../../bus'
    export default {
        name: "j_fhyzf",
        // 保留两位小数
        filters: {
            keepTwoNum(value) {
                value = Number(value);
                return value.toFixed(2)
            }
        },
        data() {
            return {

                currentPage:1,
                input: '',
                zhuohao:0,
                dingdanhao:'',

                isSHOW: false,
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                caiData: [],
                dialogImgVisible: false,
                dialogFormVisible: false,
                form: {
                    shishou: '',
                    people_num: '',
                    type: '',
                },
                formLabelWidth: '100px',
                message: 555,
                zhifubao: require("../../assets/images/zhifubao.jpg"),
                weixin: require("../../assets/images/weixin.jpg")

            }
        },
        methods: {
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },//表格文字居中
            //分页翻页
            changePage(val) {
                this.currentPage=(val)
            },
            //查询
            chaxun() {
                if(this.input===''||this.input===null){
                    this.$alert('<strong>你还没有输入桌号，蠢货!', '提示', {
                        dangerouslyUseHTMLString: true
                    });
                }else {
                    axios({
                        url:api.chaXiaoFei,
                        method:'get',
                        params:{ seatsId:this.input }
                    }).then(res=>{
                        // console.log(res)
                        if (res.data.code===200){
                            this.isSHOW=true
                            this.zhuohao=this.input
                            this.dingdanhao=res.data.info.orderId
                            this.createTime=res.data.info.createTime
                            this.caiData=res.data.info.details
                        }else if(res.data.code===400){
                            this.$alert('<strong>这个桌子现在没有待支付的订单！', '提示', {
                                dangerouslyUseHTMLString: true
                            });
                        }

                    })

                }



            },

            // 现金
            xianjin() {
                this.dialogFormVisible = true
            },
            //电子
            dianzi() {
                this.dialogImgVisible = true
            },
            shuoqian() {
                // console.log(this.dingdanhao)
                axios({
                    url:api.commonPay,
                    method:'get',
                    params:{orderId:this.dingdanhao},
                }).then(res=>{
                    // console.log(res)
                    // if(res.data.code===200){
                        this.$confirm('结账成功, 是否修改餐桌状态?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(() => {
                            this.$router.push('/index/j_czgl')

                        }).catch(() => {
                            this.$router.push('/index/syn_index')
                            this.$message({
                                type: 'info',
                                message: '记得去修改餐桌状态！'
                            })
                        })

                    // }else if(res.data.code===400){
                    //     this.$alert('<strong>结账失败，请稍后再试!', '提示', {
                    //         dangerouslyUseHTMLString: true
                    //     });
                    // }
                })
            },
            //取消  回去
            quxiao() {
                this.$confirm('操作将会离开此页面，回到点菜页面', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$router.push('/index/syn_index')
                })
            },


        },

        created() {
            bus.$on('getData',(postData=>{
                // console.log(postData)
                this.caiData=postData.details
                this.dingdanhao=postData.orderId
                this.zhuohao=postData.seatsId
                this.isSHOW=true
                // console.log(this.dingdanhao)
            }))
        },
        computed: {
            currentData(){
                let start=(this.currentPage-1)*4
                let end=(this.currentPage-1)*4+4
                return this.caiData.slice(start,end)

            },
            sumMoney() {
                return this.caiData.map(
                    row => row.number * row.price).reduce(
                    (acc, cur) => (parseFloat(cur) + acc), 0)
            },
            zhao() {
                return this.form.shishou - this.sumMoney
            },


        }


    }
</script>

<style scoped lang="less">
    .clear:after {
        clear: both;
        content: '';
        display: block;
    }

    .chaxun {
        width: 50%;
        padding: 10px;
        float: right;

        .search {
            width: 50%;
        }

        .el-button {
            margin-left: 20px;
        }
    }

    .biao {
        width: 80%;
        margin: 0 auto;

        .el-table {
            width: 100%;
            height: 240px;
        }
    }

    .hao {
        text-align: left;

        p {
            padding: 10px;
        }

        h3 {
            padding: 10px;
            color: red;
        }

        .juzhong {
            text-align: center;
           .zhifu{
               margin: 0 auto;
               width: 100%;
               text-align: center;
               .el-image{
                   width: 200px;
                   height: 260px;
                   margin: 0 auto;
               }
           }


        }



    }
    .wen{
        display: inline-block;
        padding: 5px 0;
    }

</style>